﻿<template>
    <div v-cloak class="flex-column bg-light">
        <component is="style" />
        <template v-if="show">
            <van-calendar ref="vantCalendar" color="#07c160" :show-subtitle="false" type="single" :formatter="formatter"
                          :poppable="false" :min-date="minDate" :max-date="maxDate" :show-confirm="false" :default-date="date"
                          v-on:confirm="onConfirm" :style="{ height: 'auto' }">
                <template v-slot:title>
                    <div class="flex-row padding-lr-10">
                        <div v-on:click="!prevMonth.disabled&&goto(0,prevMonth.date)"
                             :class="[prevMonth.disabled?'color-gray':'color-blue']">
                            <van-icon name="arrow-left"></van-icon>
                            {{prevMonth.m}}
                        </div>

                        <div class="flex-row-fill flex-row" style="justify-content:center;">
                            <text class="bold">{{currentMonth.m}}</text>
                            <van-icon name="location-o" class="color-blue"
                                      v-on:click="goto(1,currentMonth.date)">今天</van-icon>
                            <div v-on:click="AddCar(0)" class="margin-left-10" style="padding: 8px; display: flex; justify-content: center; align-items: center; background-image: linear-gradient(-225deg, rgb(93, 159, 255) 0%, rgb(184, 220, 255) 48%, rgb(107, 187, 255) 100%); border-radius: 50%; color: rgb(0, 177, 255);  opacity: 0.75;width:30px;height:30px;"><van-icon name="plus" /></div>
                        </div>
                        <div :class="[nextMonth.disabled?'color-gray':'color-blue']"
                             v-on:click="!nextMonth.disabled&&goto(2,nextMonth.date)">
                            {{nextMonth.m}}
                            <van-icon name="arrow"></van-icon>
                        </div>
                    </div>
                </template>
            </van-calendar>
            <div class="flex-column-fill hidden margin-tb-20">
                <van-cell-group inset :border="false" class="hidden-x" style="max-height:100%;">
                    <van-cell title-style="flex:none;min-width:150rpx;" v-for="item in objList" :key="item.schId"
                              :title="item.schTitle" :value="item.schMark"></van-cell>
                </van-cell-group>
            </div>
        </template>
        <hxt-popup v-model="showAdd" round closeable getContainer="body">
            <template #title>
                新增日程
            </template>
            <div class="bg-light flex-column">
                <van-cell-group inset class="margin-top-10">
                    <van-field label="标题" clearable required placeholder="请输入标题" v-model="obj.schTitle" show-word-limit maxlength="64" error-message></van-field>
                </van-cell-group>
                <van-cell-group inset class="margin-top-10">
                    <van-field label="日期" readonly required placeholder="请选择日期">
                        <template #input>
                            <hxt-calendar v-model="obj.schDate" type="single" :showConfirm="false" clearable></hxt-calendar>
                        </template>
                    </van-field>
                </van-cell-group>
                <van-cell-group inset class="margin-top-10">
                    <van-field label="备注" required placeholder="请输入备注" v-model="obj.schMark" :autosize="{ maxHeight: 60, minHeight: 40 }" type="textarea" clearable show-word-limit maxlength="400"></van-field>
                </van-cell-group>
            </div>
            <template #foot>
                <div class="padding-15 bg-light">
                    <van-button round block type="info" v-on:click="submit">保 存</van-button>
                </div>
            </template>
        </hxt-popup>
    </div>
</template>
<script>
    module = (function (hxt) {        
        return {
            name: 'user',
            data: function () {                
                return {
                    optor: hxt.store.optor,
                    currentUser: JSON.parse(JSON.stringify(hxt.store.optor)),
                    browser: hxt.wxBrowser(), // 1：手机微信；4：小程序
                    minDate: hxt.dateAdd('d', 0, hxt.dateConfig().monthBegin),
                    maxDate: hxt.dateAdd('d', 0, hxt.dateConfig().monthEnd),
                    objList: [],
                    date: new Date(),
                    oldData: {
                        obj: ""
                    },
                    obj: {
                        optType: 0,
                        schId: 0,
                        schTitle: '',
                        schDate: '',
                        schMark: ''
                    },
                    showAdd: false,
                    show: false
                };
            },
            computed: {
                currentMonth: function () {
                    return {
                        m: hxt.dateFormat("yyyy年MM月", this.date),
                        date: this.date,
                    };
                },
                prevMonth: function () {
                    return {
                        m: hxt.dateFormat('M月', hxt.dateAdd('M', -1, hxt.dateFormat('yyyy-MM-01', this.date))),
                        date: hxt.dateAdd('M', -1, hxt.dateFormat('yyyy-MM-01', this.date)),
                        disabled: hxt.dateAdd('M', -6, hxt.dateFormat('yyyy-MM-dd')) > hxt.dateAdd('M', 0, this.date)
                    };
                },
                nextMonth: function () {
                    return {
                        m: hxt.dateFormat('M月', hxt.dateAdd('M', +1, hxt.dateFormat('yyyy-MM-01', this.date))),
                        date: hxt.dateAdd('M', +1, hxt.dateFormat('yyyy-MM-01', this.date)),
                        disabled: hxt.dateAdd('M', +6, hxt.dateFormat('yyyy-MM-dd')) < hxt.dateAdd('M', 0, this.date)
                    };
                }
            },
            activated: function () {

            },
            watch: {
                date: function (val) {
                    var _this = this;
                    _this.objList = _this.list.filter(function (item) {
                        return item.schDate == hxt.dateFormat("yyyy-MM-dd", val);
                    });
                }
            },
            mounted: function () {
                var _this = this;
                _this.$parent.showHome = true;
                _this.loadList();
            },
            methods: {
                loadList: function () {
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link + 'pc/scheduleList',
                        data: {
                            beginTime: hxt.dateConfig(this.date).monthBegin,
                            endTime: hxt.dateConfig(this.date).monthEnd,
                            pageIndex: 1,
                            pageSize: 100
                        },
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('加载失败：：' + res.errmsg + '，请稍后重试！');
                            _this.list = res.data.list;
                            _this.$nextTick(function () {
                                _this.show = true;
                                _this.objList = _this.list.filter(function (item) {
                                    return item.schDate == hxt.dateFormat("yyyy-MM-dd", _this.date);
                                });
                            });
                        }
                    });
                },
                formatter: function (day) {
                    if (!this.list) return day;
                    var obj = this.list.find(function (item) {
                        return item.schDate == hxt.dateFormat("yyyy-MM-dd", day.date);
                    });
                    if (!!obj) {
                        day.bottomInfo = obj.schTitle;
                    }
                    return day;
                },
                onConfirm: function (e) {
                    var _this = this,date = hxt.dateFormat("yyyy-MM-dd", e);
                    _this.date = e;
                    _this.objList = _this.list.filter(function (item) {
                        return item.schDate == date;
                    });
                },
                goto: function (type, date) { //0上一月 1今天 2下一月
                    var _this = this,
                        date = type == 1 ? new Date() : date;
                    _this.date = date;
                    _this.show = false;
                    _this.loadList();
                    _this.$nextTick(function () {
                        _this.minDate = new Date(hxt.dateConfig(date).monthBegin);
                        _this.maxDate = new Date(hxt.dateConfig(date).monthEnd);
                    });
                },
                AddCar: function (flag) {
                    var _this = this,
                        obj = {
                            optType: flag,
                            schId: 0,
                            schTitle: '',
                            schDate: hxt.dateFormat("yyyy-MM-dd", _this.date),
                            schMark: ''
                        };
                    if (flag == 0) {
                        _this.obj = obj;
                        _this.oldData.obj = JSON.stringify(_this.obj);
                        _this.showAdd = true;
                        return;
                    };
                },
                closeAdd: function (e) {
                    var _this = this;
                    _this.showAdd = false;
                },
                submit: function (e) {
                    var _this = this,
                        obj = _this.obj;
                    if (!$.trim(obj.schTitle)) return hxt.error('提交失败：请输入日程标题');
                    hxt.confirm("确定添加？", function () {
                        hxt.post({
                            url: hxt.config.link + "pc/scheduleSave",
                            data: obj,
                            ok: function (res) {
                                if (res.code != 0) return hxt.error('操作失败：' + res.errmsg);
                                _this.show = false;
                                hxt.success('添加成功');
                                _this.loadList();
                                _this.showAdd = false;
                            }
                        });
                    });
                },
            },
            components: {
                hxtFileSelector: function () { return hxt.staticComponent(@Html.Raw(this.vueComponent("~/Views/wx/Components/hxt.FileSelector.cshtml"))); }
            }
        };
    })(window.$jscript.fn);
</script>
<style>
</style>